<template>
  <div>
    <!-- 默认插槽 -->
    <ChildA>
      <p>{{ count }}</p>
      <button @click="count++">count++</button>
    </ChildA>
    <!-- 命名插槽 -->
    <ChildB>
      <template #header>
        <header>header</header>
      </template>
      <nav>nav</nav>
      <template v-slot:footer>
        <footer>footer</footer>
      </template>
    </ChildB>
    <!-- 作用域插槽 -->
    <ChildC>
      <template #box="slotScoped">
        <header>childC-header {{ slotScoped.username }}</header>
      </template>
      <template v-slot="{ age }">
        <footer>{{ age }}</footer>
      </template>
    </ChildC>
  </div>
</template>

<script>
import ChildA from './ChildA.vue'
import ChildB from './ChildB.vue'
import ChildC from './ChildC.vue'
export default {
  name: 'App',
  data() {
    return {
      count: 0,
    }
  },
  components: {
    ChildA,
    ChildB,
    ChildC,
  },
}
</script>

<style></style>
